import { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
import { BaseData } from '@shared/models/base-data';
import { isEqual, isNotEmptyStr, isObject } from '@shared/utils';

/**
 * 项目芯片组件
 * 
 * 用于在表格单元格中显示关联实体列表（如标签、分类等）
 * 支持：
 * - 显示实体名称
 * - 点击跳转到详情页（如果提供了 URL）
 * - 自动处理单个对象或数组格式的数据
 */
@Component({
  selector: 'cne-item-chips',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    TranslateModule
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './item-chips.component.html',
  styleUrls: ['./item-chips.component.scss']
})
export class ItemChipsComponent implements OnChanges {

  /**
   * 实体数据对象
   */
  @Input()
  entity: BaseData | null = null;

  /**
   * 实体对象中存储关联实体列表的属性键名
   */
  @Input()
  key: string = '';

  /**
   * 详情页 URL 前缀（可选）
   * 如果提供，芯片会生成跳转链接：{detailsPagePrefixUrl}/{subEntity.id}
   */
  @Input()
  detailsPagePrefixUrl: string = '';

  /**
   * 关联实体列表
   */
  subEntities: BaseData[] = [];

  ngOnChanges(changes: SimpleChanges): void {
    // 只监听 entity 和 key 的变化
    if (changes['entity'] || changes['key']) {
      this.update();
    }
  }

  /**
   * 更新关联实体列表
   */
  private update(): void {
    if (!this.entity || !this.key) {
      this.subEntities = [];
      return;
    }

    // 从实体对象中获取关联实体列表
    const entityData = this.entity as Record<string, unknown>;
    let entitiesList = entityData[this.key];

    // 处理单个对象的情况：转换为数组
    if (isObject(entitiesList) && !Array.isArray(entitiesList)) {
      entitiesList = [entitiesList];
    }

    // 确保是数组格式
    if (!Array.isArray(entitiesList)) {
      entitiesList = [];
    }

    // 过滤出有效的实体对象（必须有 id 或 name）
    const validEntities = (entitiesList as unknown[]).filter((item): item is BaseData => {
      if (!isObject(item)) {
        return false;
      }
      const entity = item as BaseData;
      return !!(entity.id || entity.name);
    });

    // 只在列表变化时更新（避免不必要的变更检测）
    if (!isEqual(validEntities, this.subEntities)) {
      this.subEntities = validEntities;
    }
  }

  /**
   * 获取实体的显示名称
   */
  getEntityName(entity: BaseData): string {
    return entity.name || entity.label || entity.id || '';
  }

  /**
   * 获取实体的详情页 URL
   */
  getEntityUrl(entity: BaseData): string | null {
    if (!isNotEmptyStr(this.detailsPagePrefixUrl) || !entity.id) {
      return null;
    }
    return `${this.detailsPagePrefixUrl}/${entity.id}`;
  }
}
